<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <input type="text" id="txt1">
    <select id="computed">
        <option value="+"> + </option>
        <option value="-"> - </option>
        <option value="*"> * </option>
        <option value="/"> / </option>
        <option value="%"> % </option>
    </select>
    <input type="text" id="txt2">
    <input type="button" value="=" id="action">
    <input type="text" id="result" readonly>
</body>
<script>
    
    // 简易计算器
    // 选择器
    var txt1 = document.getElementById("txt1");
    var txt2 = document.getElementById("txt2");
    var computed = document.getElementById("computed");
    var action = document.getElementById("action");
    var result = document.getElementById("result");

    // 绑定事件，一切功能都发生在点击之后
    action.onclick = function(){
        // 获取输入框内容（注意数据类型）
        var n1 = txt1.value/1;
        var n2 = txt2.value*1;
        var c = computed.value;
        // 准备保存结果
        var sum = 0;
        // 判断是什么符号，根据不同的符号进行不同的运算
        switch(c){
            case "+": sum = n1 + n2;break;
            case "-": sum = n1 - n2;break;
            case "*": sum = n1 * n2;break;
            case "/": sum = n1 / n2;break;
            case "%": sum = n1 % n2;break;
        }
        // 将计算结果放在结果框中
        result.value = sum;
    }



</script>
</html>